---
layout: default
---

<section class="tutorial">
	<section class="sidebar sticky">
		<ul>
			{% assign sub_navigation = content | extract_element: 'h2' %}
			{% for item in sub_navigation %}
				<li><a href="#{{ item.id }}">{{ item.text }}</a></li>
			{% endfor %}
		</ul>
	</section>
	<section class="tutorial-content">
		<h1>{{ page.title }}</h1>

		{% if page.type == "Video" %}
			{% include youtube.html video_id=page.video_id %}

			{% if page.resources %}
				<div class="resources">
					<ul>
						{% for resource in page.resources %}
							<li><a href="{{ resource.link }}">{{ resource.name }}</a></li>
						{% endfor %}
					</ul>
				</div>
			{% endif %}
		{% endif %}

		<div class="tutorial-main">
			{{ content }}
		</div>
		<div class="tutorial-share">
			<a class="modalOpen no-smooth" href="https://github.com/Neamar/KISS/issues/new">{% include social-icon.html icon="Subscribe" %} Need more help? Open an issue on GitHub!</a>
		</div>
	</section>
</section>

{% if page.set %}
	{% assign set_file_name = "_sets/" | append: page.set | append: ".md" %}
	{% assign set = site.sets | where: "path", set_file_name | first %}
	{% assign series_posts = site.posts | where: "set", page.set %}
	<div class="tutorial-series">
		<h3>{{ set.title }} - Series</h3>
		<p>{{ set.description }}</p>

		{% include listings.html listings=series_posts numbered=true%}
	</div>
{% endif %}
{% assign related_posts = site.related_posts %}
{% assign related_posts_size = related_posts | size %}
{% if related_posts_size > 0 %}
	<div class="related">
		<h3>Related tutorials</h3>

		{% include listings.html listings=site.related_posts %}
	</div>
{% endif %}

{% if site.disqus_shortname and page.comments %}
	<div id="disqus_thread"></div>
	<script>
		var disqus_shortname = '{{ site.disqus_shortname }}';
		var disqus_config = function () {
			this.page.url = "{{ page.url | prepend: site.url }}";
			this.page.identifier = "{{ page.id }}";
		};
		(function() {  // DON'T EDIT BELOW THIS LINE
			var d = document, s = d.createElement('script');
			s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
			s.setAttribute('data-timestamp', +new Date());
			(d.head || d.body).appendChild(s);
		})();
	</script>
	<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
{% endif %}

<div id="subscribe" class="modalDialog">
	<div>
		<a title="Close" class="close">&times;</a>
		<form action="{{ site.newsletter_action }}" method="post">
			<h2>Subscribe</h2>
			<p>The latest tutorials sent straight to your inbox.</p>
			<input type="email" name="EMAIL" placeholder="Email">
			<input type="submit" value="Sign up">
		</form>
	</div>
</div>

<div id="share" class="modalDialog sharing">
	<div>
		<a title="Close" class="close">&times;</a>
		<h2>Share</h2>
		<p>Share this tutorial with your community.</p>
		<ul>
			<li><a class="twitter" target="_blank" href="https://twitter.com/intent/tweet?url={{ page.url | prepend: site.url | cgi_escape }}">{% include social-icon.html icon="Twitter" %} Twitter</a></li>
			<li><a class="facebook" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | prepend: site.url | cgi_escape }}">{% include social-icon.html icon="Facebook2" %} Facebook</a></li>
			<li><a class="google-plus" target="_blank" href="https://plus.google.com/share?url={{ page.url | prepend: site.url | cgi_escape }}">{% include social-icon.html icon="Google Plus" %} Google+</a></li>
			<li><a class="hacker-news" target="_blank" href='http://news.ycombinator.com/submitlink?u={{ page.url | prepend: site.url | cgi_escape }}&t={{ page.title | cgi_escape | replace: "+", "%20" }}'>{% include social-icon.html icon="Hacker News" %} Hacker News</a></li>
		</ul>
	</div>
</div>

<script src="{{ site.baseurl }}/js/main.js"></script>

<script>
	var headings = document.querySelectorAll("h2[id]");

	console.log(headings);
	for (var i = 0; i < headings.length; i++) {
		var anchorLink = document.createElement("a");
		anchorLink.innerText = "#";
		anchorLink.href = "#" + headings[i].id;
		anchorLink.classList.add("header-link");

		headings[i].appendChild(anchorLink);
	}

	$(".modalOpen").click(function() {
		var id = $(this).attr("href");
		$(id).addClass("show");

		$(window).click(function() {
			$(".show").removeClass("show");
		});

		$(id + " > div").click(function(event){
			event.stopPropagation();
		});
		return false;
	});

	$(".close").click(function() {
		$(".show").removeClass("show");
		return false;
	});

	$(document).keyup(function(e) {
		if (e.keyCode == 27) {
			$(".show").removeClass("show");
		}
	});
</script>
